<script setup lang='ts'>
import {useUserStore} from '@/stores/users'
import { Notify } from 'vant';
//引入ref
import { ref } from 'vue'
import {useRouter} from 'vue-router'
//使用路由
const router = useRouter();

const tel = ref('');
//使用store
const userStore = useUserStore();
//编写正则
const pattern = /^\d{11}$/
const onSubmit = async (values: {tel:string}) => {
    /* 
        1. 编写API=>store=>组件
        2. 告诉是否可以被注册
    */
    try{
        await userStore.checkPhoneHandler(values)
        //可以注册,跳转到 set2
        router.push("/register/step2")
    }catch{
        //不可以注册
        Notify("请更换手机号码")
    }
};
</script>
<template>
    <van-form @submit="onSubmit" validate-trigger="onChange">
        <van-cell-group inset>
            <van-field v-model="tel" name="tel" label="请输入手机号" placeholder="请输入手机号码"
                :rules="[{ required: true, message: '请填写手机号码' }, { pattern, message: '手机号码为11位' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="danger" native-type="submit">
                下一步
            </van-button>
        </div>
    </van-form>
</template>
<style scoped lang='scss'>
.van-form{
    margin-top: 60px;
}
</style>